<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<link href="主页demo/js/layui/css/layui.css" />
		<script src="主页demo/js/layui/layui.js"></script>
	</head>
	<body>
		  <button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">居中弹出</button>
		<button class="layui-btn-normal">点击</button>
	
			  <div class="layui-row" style="width: 500px;height: 500px;border: 1px solid red;margin:0px auto;padding: 50px;">
			    <div   style="border: 1px solid green;width: 100%;height: 100px;" >
			      移动：6/12 | 平板：6/12 | 桌面：4/12
			    </div>
			    <div   style="border: 1px solid green;width: 100%;height: 100px;">
			      移动：6/12 | 平板：6/12 | 桌面：4/12
			    </div>
				<div   style="border: 1px solid green;width: 100%;height: 100px;">
				  移动：6/12 | 平板：6/12 | 桌面：4/12
				</div>
			  
			  
			</div>
		
		
		<script>
			$(function(){
				layui.use('layer', function(){
				  var layer = layui.layer;
				  
				 var active = {
					 offset: function(othis){
					       var type = othis.data('type')
					       ,text = othis.text();
					       
					       layer.open({
					         type: 1
					         ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
					         ,title:"用户名密码登录"
							 ,area:'800px'
							 ,id: 'layerDemo'+type //防止重复弹出
					         ,content: '<div style="padding: 20px 100px;"></div>'
					         ,btn: '关闭全部'
					         ,btnAlign: 'c' //按钮居中
					         ,shade: 0.3//不显示遮罩
					         ,yes: function(){
					           layer.closeAll();
					         }
					       });
					     }
				 }
				 
				 
				 
				 
				 $('.layui-btn').on('click', function(){
				     var othis = $(this), method = othis.data('method');
				     active[method] ? active[method].call(this, othis) : '';
				   });
				});              
				      
			})
		</script>
	</body>
</html>
